<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>POI</title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" include="iclient-leaflet-css" src="../../dist/leaflet/include-leaflet.js"></script>
    <style>
        /*修改leaflet默认弹框样式*/

        .leaflet-popup,
        .leaflet-popup-content-wrapper {
            padding: 0;
        }

        .leaflet-popup-content {
            margin: 0;
        }
    </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    <script>
        var map = L.map('map', {
            center: [25, 40],
            zoom: 3,
        });
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var url = host + '/iserver/services/map-china/rest/maps/China';
        var sqlurl = host + "/iserver/services/map-world/rest/maps/World";

        new L.supermap.TiledMapLayer(url).addTo(map);
        //添加组件：
        var poiSearch = new L.supermap.Components.Search({
            isGeoCoding: !window.isLocal,
            perPageDataNum: 8  // 每页显示数据个数
            //设置结果图层样式：
            /*style: function (feature, latLng) {
                if (latLng /!*&& feature instanceof L.latLng || feature.geometry.type.toLowerCase() === "point"*!/) {
                    return L.circleMarker(latLng, {
                        fillColor: 'red',
                        weight: 1,
                        opacity: 1,
                        color: 'red',
                        fillOpacity: 0.6
                    });
                }
            }*/
        });
        poiSearch.addTo(map);

        //添加示例图层：
        query();

        function query() {
            //查询数据构建示例图层：
            var polygon = L.polygon([[90, 180], [90, -180], [-90, -180], [-90, 180], [90, 180]]);
            var param = new L.supermap.QueryByBoundsParameters({
                queryParams: { name: "Capitals@World.1" },
                bounds: polygon.getBounds()
            });
            new L.supermap
                .QueryService(sqlurl)
                .queryByBounds(param).then(function (serviceResult) {
                    var result = serviceResult.result;
                    var resultLayer = L.geoJSON(result.recordsets[0].features, {
                        pointToLayer: function (geoJsonPoint, latlng) {
                            return L.circleMarker(latlng, {
                                fillColor: 'blue',
                                weight: 1,
                                opacity: 1,
                                color: 'blue',
                                fillOpacity: 0.6
                            });
                        },
                    }).addTo(map);
                    poiSearch.addSearchLayer([new L.supermap.Components.GeoJSONLayerWithName("首都", resultLayer)]);
                });
        }
    </script>
</body>

</html>